import React from 'react';
import { NavBar, Space, Toast } from 'antd-mobile';
import { SearchOutline, MoreOutline, CloseOutline } from 'antd-mobile-icons';
import { Button } from 'antd-mobile';
import { RightOutline } from 'antd-mobile-icons';
import { history } from 'umi';
import './order.less';
function back() {
  history.goBack();
}
function skip() {
  history.push('/hello/pay');
}
export default function order() {
  return (
    <div className="ordering">
      <div className="header">
        <NavBar onBack={back}>填写订单</NavBar>
      </div>
      <div className="address">
        <span>公司</span>
        <span>上海市静安区</span>
        <p>铜仁路299号SOHO东海广场2703</p>
        <p>
          <b>张三</b>
          <span>15630045631</span>
        </p>
        <div
          style={{
            position: 'absolute',
            marginLeft: '8.5rem',
            marginTop: '-1.5rem',
          }}
        >
          <Space wrap style={{ fontSize: 28 }}>
            <RightOutline />
          </Space>
        </div>
      </div>
      <div className="middle">
        <h3>安格斯牛肉生鲜旗舰店</h3>
        <div className="content">
          <img
            src="https://img.alicdn.com/imgextra/i3/96071623/O1CN011ZW9Gc1NrNZUYullH_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"
            alt=""
            width="25%"
          />
          <div className="title-a">
            <p>英国【设计师】Catia Seli 925纯银珍珠项链 女小众轻奢高级.....</p>
            <div style={{ marginTop: '0.5rem' }}>
              <span className="bor">英国轻奢设计首饰</span>
            </div>
          </div>
        </div>
        <div className="price">
          <p>￥69.9</p>
          <div className="buttons">
            <button>-</button>
            <span>1</span>
            <button>+</button>
          </div>
        </div>
        <div className="bottom">
          <p>配送</p>
          <div className="yf">
            <p>快速运输 免运费</p>
            <span>预计8月18号周四送达</span>
          </div>
        </div>
      </div>
      <div className="next">
        <div className="text">
          <p>商品金额</p>
          <p>￥99.90</p>
        </div>
        <div className="text">
          <p>运费</p>
          <p>￥99.90</p>
        </div>
        <div className="text">
          <p>立减</p>
          <p style={{ color: 'red' }}>￥99.90</p>
        </div>
        <div className="text">
          <p>优惠券</p>
          <p>无可用</p>
        </div>
        <div className="total">
          合计：<span style={{ color: 'red' }}>￥69.9</span>
        </div>
      </div>
      <div className="zf">
        <div className="pay">
          <p>支付方式</p>
          <p>微信支付</p>
        </div>
      </div>
      <div className="bott">
        <div className="prices">￥69.8</div>
        <div>
          <Button block shape="rounded" color="danger" onClick={() => skip()}>
            提交订单
          </Button>
        </div>
      </div>
    </div>
  );
}
